<template>
  <div
    class="relative flex flex-col w-full"
    :class="[
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
      `items-${info.extension.justifyAlign.value}`,
      `justify-${info.extension.itemsAlign.value}`,
    ]"
    :style="{
      '--height': `${info.extension.boxHeight.value}px`,
      height: `${info.extension.boxHeight.value}px`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      backgroundColor: `${info.extension.backgroundColor.value}px`,
    }"
  >
    <div
      class="flex"
      :style="{
        color: info.extension.titleColor.value,
        fontWeight: info.extension.titleFontWeight.value + 'px',
        fontSize: info.extension.titleFontSize.value + 'px',
        letterSpacing: info.extension.letterSpacing.value + 'px',
      }"
    >
      <CountTo
        ref="countTo"
        autoplay
        :decimals="info.extension.decimals.value"
        :duration="info.extension.duration.value * 1000"
        :end-val="parseFloat(info.extension.endVal.value)"
        :prefix="info.extension.prefix.value"
        :separator="info.extension.separator.value"
        :start-val="parseFloat(info.extension.startVal.value)"
        :suffix="info.extension.suffix.value"
        :val="parseFloat(info.extension.endVal.value)"
      />
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin } from '@ve/mixin'
  import { CountTo } from 'vue3-count-to'
  // import CountTo from './components/countToVal.vue'
  export default defineComponent({
    name: 'UiCount',
    components: {
      CountTo,
    },
    mixins: [UiMixin],
    watch: {
      info: {
        handler() {
          // console.log(this.info.extension.startVal.value, this.info.extension.endVal.value)
          this.$refs.countTo.start()
        },
        deep: true,
      },
    },
  })
</script>
<style>
  .uiCount {
    height: var(--height);
    width: 100%;
  }
</style>
